{extend name="public/base" /}
{block name='nav'}
{/block}
{block name='body'}

<div class="layui-container" style="padding-top: 10px;background: white;padding: 10px; ">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="search-box">
                <div class="searchs_box">
                    <input type="text" name="keyword" id="keyword" value="{$Think.cookie.keyword}" lay-verify="required"
                           autocomplete="off"
                           placeholder="请输入要查询的关键词" class="layui-input">
                    <button class="layui-btn" id="search-btn"><i class="layui-icon"></i>立即查询
                    </button>
                </div>
                <div></div>
            </div>
        </div>
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>搜索选项</legend>
            </fieldset>
        </div>
        <div class="layui-form-item search-box-border">
            <div class="layui-form">
                <div class="layui-form-item search-cat">
                    <div>所属分类</div>
                    <span class="layui-breadcrumb" lay-separator="|" id='cat'>
                                            {volist name='cats' id='cat'}
                                                 <a href="javascript:">{$cat.Name}</a>
                                            {/volist}

                                          </span>
                </div>
                <div class="dot-line"></div>
                <div class="layui-form-item search-cat ">
                    <div>时间</div>
                    <span class="layui-breadcrumb" lay-separator="|" id="time">
                        {volist name='years' id='year'}
                                                                    <a value="{$year}" href="javascript:">{$year}</a>
                                                                    {/volist}


                                          </span>
                </div>
                <div class="dot-line"></div>
                <div class="layui-form-item search-cat ">
                    <div>排序方式</div>
                    <span class="layui-breadcrumb" lay-separator="|" id="order">
                                             <a value="asc" href="javascript:">升序</a>
                                             <a value="desc" href="javascript:" class="search-selected">降序</a>
                           </span>
                </div>
            </div>
        </div>
        <div class="layui-form-item  search-box-border">
            <div class="layui-form">
                <div class="layui-form-item search-cat">
                    <div>你是不是要找</div>
                    <span class="layui-breadcrumb" id="searchHistory">

                    </span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="fly-panel">
                <ul class="fly-list"  id="sw-res-searchs-list">
                    <div class="fly-panel">
                        <div class="fly-none search-tips">
                            <p><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe615;</i> 请输入关键字进行搜索
                            </p>
                        </div>
                    </div>

                </ul>
            </div>
        </div>
    </div>


</div>


<script>
    layui.use(['jquery', 'layer', 'form', 'element'], function () {
        let layer = layui.layer, $ = layui.jquery, form = layui.form;
        let cat = {};
        let time = {};
        let order = {order: 'desc'};
        let keyword = '';

        let nosearchTpl = `{include file="tpl/searchEmpty"}`;

        //赛选条件监听
        {
            $('#cat a').click(function (obj) {
                let name = $(this).html();
                if ($(this).hasClass('search-selected')) {
                    $(this).removeClass('search-selected');
                    if (cat[name] !== 'undefined') {
                        delete cat[name];
                    }
                } else {
                    $(this).addClass('search-selected');
                    cat[name] = name;
                }
            });

            $('#time a').click(function () {
                $(this).parent().children().removeClass('search-selected');
                $(this).addClass('search-selected');
                time.year = $(this).attr('value');
            });

            $('#order a').click(function () {
                $(this).parent().children().removeClass('search-selected');
                $(this).addClass('search-selected');
                order.order = $(this).attr('value');
            })
        }
        //赛选条件监听


        $('#order a,#time a,#cat a').click(function () {
            search();
        });

        //提交搜索
        $('#search-btn').click(function () {
            search();
        });


        function search() {
            let load = layer.load();
            keyword = $("#keyword").val();
            if (!keyword) {
                layer.msg('关键字不能为空');
                layer.close(load);
                return ;
            }
            $.post("{:url('base/searchDetailApi')}", {
                search: JSON.stringify({
                    keyword: keyword,
                    cats: cat,
                    order: order,
                    time: time
                })
            }, function (res) {
                layer.close(load);
                let resData = '';
                console.log(res);
                $.each(res.data, function (index, obj) {
                    resData += dataToHtml(obj);
                });
                console.log(resData);
                if (resData) {
                    $('#sw-res-searchs-list').html(resData);
                } else {
                    //暂无数据模板
                    $('#sw-res-searchs-list').html(nosearchTpl);
                    layer.msg('暂无相关数据');
                }
            });
        }


        /**
         *转换数据
         */
        function dataToHtml(resAttr) {
            return resTpl = `{include file="tpl/resItems"}`;
        }

        /**
         * 获取搜索记录
         */
        function searchHistory() {

            let api = "{:url('base/searchHistory')}";
            let sh = layer.load(2);
            $.get(api, function (res) {

                layer.close(sh);
                if (res.errno === 0) {
                    let historys = '';
                    $.each(res.data, function (i, val) {
                        historys +=`{include file="tpl/searchHistory"}`;
                    });
                    $('#searchHistory').html(historys);
                }
            });
        }

        $("#keyword").bind('keyup', function (keys) {
            let key = keys.which;
            if (key === 13) {
                search();
            }
        });

        search();
        searchHistory();
    });
</script>

{/block}